<template>
  <div class="module-header">
    {{ `出库单列表` }}
    <div class="module-header-search">
      客户名或出库单号：
      <el-input size="default" v-model="search" clearable placeholder="输入客户名或出库单号，支持模糊搜索"/>
      <el-button size="default" type="primary" @click="currentPage=1;getData()">搜索</el-button>
      <el-button size="default" type="primary" @click="onCreateOutClick">创建出库单</el-button>
    </div>
  </div>
  <div class="table-content">
    <el-table :data="outList" table-layout="fixed" stripe empty-text="没有数据">
      <el-table-column prop="outCode" label="出库单号" width="140"></el-table-column>
      <el-table-column prop="outDate" label="出库日期" width="100"></el-table-column>
      <el-table-column prop="status" label="出库单状态" width="100"></el-table-column>
      <el-table-column prop="orderCustomerName" label="订单客户"></el-table-column>
      <el-table-column prop="deliveryCustomerName" label="交付客户"></el-table-column>
      <el-table-column label="管理" align="center" fixed="right" width="500">
        <template #default="scope">
          <el-button size="small" @click="handleExportPDF(scope.$index, scope.row)">导出PDF</el-button>
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" @click="handleView(scope.$index, scope.row)">查看</el-button>
          <el-button size="small" @click="handlePrint(scope.row)">打印</el-button>
          <el-button size="small" type="danger" @click="handleRepeal(scope.row)">作废</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 15, 20]"
                   background layout="prev, pager, next, sizes" small :total="recordCount" current-page="1"
                   :default-page-size="10"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>
</template>

<script lang="ts">
import {mixins, Options} from 'vue-class-component';
import {CirclePlusFilled, Edit, ArrowDown} from "@element-plus/icons-vue";
import DictMixin from "@/mixins/dict.mixin";
import StoreOutModel from "@/models/StoreOutModel";
import {selectOut} from '@/apis/out.api';
import {BomEntityItem} from "@/models/common.model";
import PageMixin from "@/mixins/page.mixin";

@Options({
  components: {CirclePlusFilled, Edit, ArrowDown}
})
export default class StoreListView extends mixins(DictMixin, PageMixin) {
  // 出库单列表
  private outList: StoreOutModel[] = [];
  // 模糊检索关键字，
  private search = '';

  created(): void {
    // 加载出库单数据
    this.getData()
  }

  onCreateOutClick() {
    this.$router.push('/out/create')
  }

  getData(): void {
    selectOut(this.search, this.currentPage, this.pageSize).then(value => {
      this.outList = value.content
      this.recordCount = value.totalElements;
    });
  }

  // 编辑出库单
  handleEdit(rowIndex: number, row: StoreOutModel): void {
    console.log(rowIndex, row)
  }

  handleView(rowIndex: number, row: StoreOutModel): void {
    console.log(rowIndex, row)
  }

  handlePrint(row: StoreOutModel): void {
    console.log(row)
  }

  handleExportPDF(rowIndex: number, row: BomEntityItem): void {
    console.log(rowIndex, row)
  }

  // 作废出库单，不可删除
  handleRepeal(row: StoreOutModel): void {
    console.log(row)
  }
}
</script>
